<template>
	<li class="info_list form-list border-1px input_list">
		<slot></slot>
		<label class="form_label input_label">{{label}}</label>
		<input v-if="number==1" v-bind:type="type" v-bind:disabled="!isEdit" :placeholder="placeholder" class="txt form_input" v-bind:class="[_aligned]" align="center" v-bind:value="value" v-on:input="updateValue($event.target)" />
		<div v-else style="flex: 1 !important;display: flex;align-items: center;justify-content: center;">
			<!--<input v-bind:type="type" style="width: 50%;" v-bind:disabled="!isEdit" :placeholder="placeholders[0]" class="txt form_input" v-bind:class="[_aligned]" align="center" v-bind:value="value" v-on:input="updateValue($event.target.value)" />-->
			<!--<input v-bind:type="type" style="width: 50%;" v-bind:disabled="!isEdit" :placeholder="placeholders[1]" class="txt form_input" v-bind:class="[_aligned]" align="center" v-bind:value="value" v-on:input="updateValue($event.target.value)" />-->
		</div>

	</li>
</template>

<script>
	import $ from 'jquery'
	export default {
		props: {
			label: {
				type: String,
				required: true
			},
			value: {
				default: ''
			},
			type: {
				type: String,
				default: 'text' //String ,int,boolean

			},
			aligned: {
				type: String,
				default: 'left'
			},
			validator: {

			},
			isEdit: {
				type: Boolean,
				default: true
			},
			placeholder: {
				type: String,
				default: '未填写'
			},
			number: {
				type: Number,
				default: 1
			}
		},
		computed: {
			_aligned() {
				return('text-' + this.aligned)
			}
		},
		data() {
			return {
				rule_form: ['require', 'reg', 'checkpass'],
				placeholders: []
			}
		},
		mounted() {
			//需要多个input
			if(this.number > 1) {
				if(this.placeholder.indexOf('/') > 0) {
					this.placeholders = this.placeholder.split('/')
				}
			}

			if(!this.value) {
//				console.log(this.value)
				this.$emit('input', '');
			}
		},
		methods: {
			updateValue: function(dom) {
//				console.log(value.value)
				var value = dom.value
				var formattedValue = value
				
//				if(this.number > 1) {					
//					this.$emit('input', formattedValue)
//				}else{
					//过滤规则
					if(this.type == 'number') {
						formattedValue = this.filter_number(value)
						this.$emit('input', formattedValue)
					} else {
						formattedValue = formattedValue.trim()
						this.$emit('input', formattedValue)
//						console.log(value)						
					}
//				}
			},
			req: function() {
				var that = this;
//				console.log(this.validator);
				var validator = this.validator;
				var reqs = [];
				for(var k in that.rule_form) {
					if(that.validator[that.rule_form[k]]) {
						reqs.push(that.rule_form[k]);
					}
				}
				for(var i = 0; i < reqs.length; i++) {
					if(!that[reqs[i]]().suc) {
						return that[reqs[i]]();
					}
				}
				return {
					suc: true,
					msg: '保存成功！'
				}
			},
			require() {
				var that = this;
				if(!this.value) {
					return {
						suc: false,
						msg: that.label + '不能为空'
					}
				} else {
					return {
						suc: true,
						msg: '保存成功！'
					}
				}
			},
			reg() {
				var that = this;
				var mtest = that.validator.reg.test(this.value);
				if(!mtest) {
					return {
						suc: false,
						msg: '请输入正确的手机号码！'
					}
				} else {
					return {
						suc: true,
						msg: '保存成功！'
					}
				}

			},
			checkpass() {

			},
			filter_number(value) {
				var num = value
				var reg = /^0/
				if(reg.test(num)) {
					num = 1
				}
				return num;
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	@import 'index.less';
</style>